<template>
  <div>
    <el-card class='box-card'>
      <template #header>
        <el-row>
          <el-col :span='14'>
            <el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)'/>
            <el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
            <el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
            <span style='margin-left: 10px;color: red'>编号策略主要服务于业务模块主数据流水号</span>
          </el-col>
          <el-col :span='10' style='text-align: right'>
            <el-button type='success' :icon='Plus' @click='editRef.openModal()' plain>新增</el-button>
            <el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
          </el-col>
        </el-row>
        <div v-show='state.moreParams' class='more-params'>
          <el-form :inline='true' label-width='100px'>
            <el-form-item label='更多参数1'>
              <el-input v-model='state.form.notes' placeholder='更多参数1'/>
            </el-form-item>
            <el-form-item label='更多参数2'>
              <el-input v-model='state.form.xx' placeholder='更多参数2'/>
            </el-form-item>
            <el-form-item/>
          </el-form>
        </div>
      </template>

      <el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
                v-loading='state.loading' :data='state.list'
                border stripe @selection-change='listSelect($event,state)'>
        <el-table-column type='selection' width='55' align='center'/>
        <el-table-column label='序号' type='index' width='55' align='center'/>
        <el-table-column label='编号策略代码' prop='id' width='160'>
          <template #default='scope'>
						<span style='cursor:pointer;color: #3e9ece' @click='editRef.openModal({id:scope.row.id})'>
							{{ scope.row.id }}
						</span>
          </template>
        </el-table-column>
        <el-table-column label='编号策略名称' prop='name' width='180'/>
        <el-table-column label='前缀' prop='nupre' width='160'/>
        <el-table-column label='生成模式' prop='numod' width='160'/>
        <el-table-column label='下一个编号' prop='nunex' width='160'/>
        <el-table-column label='备注' prop='notes'/>
      </el-table>

      <el-pagination
          @size-change='listQuery(state)' @current-change='listQuery(state)'
          class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
          :total='state.total' v-model:current-page='state.form.page'
          v-model:page-size='state.form.pageSize'
          layout='total, sizes, prev, pager, next, jumper'
      />
    </el-card>
    <Edit ref="editRef" @close="listQuery(state)"/>
  </div>
</template>

<script lang='ts' setup>
import {Plus, Delete, ArrowDown, ArrowUp} from '@element-plus/icons-vue';
import {onMounted, reactive, ref} from 'vue';
import {listQuery, listDelete, listSelect} from '/@/comps/page/index';
import Edit from './edit.vue';


const editRef = ref() as any;
const state = reactive({
  url: '/ass/num/main', loading: true, ids: [], cates: [] as any,
  form: {}, single: true, multiple: true, list: [], total: 0,
});

onMounted(() => {
  listQuery(state);
});


</script>

<style scoped>

</style>
